<template>
	<view class="home">



		<view class="hed">
			<image class="i" src="/static/message/bg.png"></image>
		</view>
		<view class="top">
			<i class="iconfont icon-sousuo ss" @click="search"></i>
			<input placeholder="你想住在哪？" class="top-inp" type="text" @click="search" />
			<i class="iconfont icon-31dingwei dw"></i>
			<view class="top-in" @click="gitlist">{{cityName}}</view>

		</view>


		<view class="mains">

			<!-- //小图标 -->
			<view class="obj">
				<view class="item">
					<image src="/static/message/1.png"></image>
					<view>二手房</view>
				</view>
				<view class="item">
					<image src="/static/message/2.png"></image>
					<view>新房</view>
				</view>
				<view class="item">
					<image src="/static/message/3.png"></image>
					<view>租房</view>
				</view>
				<view class="item">
					<image src="/static/message/4.png"></image>
					<view>装修</view>
				</view>
				<view class="item">
					<image src="/static/message/5.png"></image>
					<view>家具商场</view>
				</view>
				<view class="item">
					<image src="/static/message/sort.png"></image>
					<view>卖房</view>
				</view>
				<view class="item">
					<image src="/static/message/sort2.png"></image>
					<view>家庭服务</view>
				</view>
				<view class="item">
					<image src="/static/message/sort3.png"></image>
					<view>商品办公</view>
				</view>
				<view class="item">
					<image src="/static/message/sort4.png"></image>
					<view>买卖流程</view>
				</view>
				<view class="item">
					<image src="/static/message/sort5.png"></image>
					<view>维修</view>
				</view>
				<view class="item">
					<image src="/static/message/sort6.png"></image>
					<view>好赞好房</view>
				</view>
				<view class="item">
					<image src="/static/message/sort7.png"></image>
					<view>社区生活</view>
				</view>
				<view class="item">
					<image src="/static/message/sort8.png"></image>
					<view>找经纪人</view>
				</view>
			</view>
			<!-- 找房 -->
			<view class="connet">
				<view class="connet-top">
					帮我找房
				</view>
				<image src="../../static/logo.png" class="conimg"></image>
			</view>

			<!-- 新房 -->
			<view class="house">
				<view class="tit">
					新房*本周热门好盘
				</view>
				<view class="estate">
					<view class="item" v-for="i in nlist" :key="i.id">
						<image class="img" :src="i.imgs" mode=""></image>
						<view class="tits">{{i.name}}</view>
						<view class="m">{{i.point}}m</view>
						<view class="pric">
							{{i.price}}元//平
						</view>
					</view>

				</view>
			</view>


			<!-- 猜你喜欢的 -->
			<view class="like">
				<view class="like-tit">
					猜你喜欢的
				</view>

				<view v-for="v in likelist" :key="v.id">

					<Foot :v="v"></Foot>

				</view>

			</view>




		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"

	import {
		list,
		gethouse
	} from "../../api/user.js"

	import Foot from "@/components/foot/foot.vue"
	export default {
		components: {
			Foot
		},
		data() {
			return {
				nlist: [],
				pageData: {
					page: 1,
					pagesize: 10
				},
				likelist: []
			}
		},
		created() {

			// #ifdef MP
			this.getCity()
			// #endif

			//获取热门房源信息
			this.gittolist()

			//获取猜你喜欢
			this.gitlike()
		},
		//下拉的生命周期
		onReachBottom() {
			// console.log("66666");
			this.pageData.page++
			this.gitlike()

		},
		methods: {

			//点击搜索跳转搜索页面
			//跳转
			search() {
				uni.navigateTo({
					url: "/pages/home/search"
				})
			},
			//点击进入城市列表

			gitlist() {
				// #ifdef H5 ||APP
				uni.navigateTo({
					url: "/pages/home/city"
				})
				// #endif


				// #ifdef MP
				uni.navigateTo({
					url: "/pages/home/maps"
				})
				// #endif

			},

			//获取热门房源信息
			async gittolist() {
				let res = await list()
				// console.log(res);
				this.nlist = res.data
				// console.log(this.nlist);
			},


			//获取猜你喜欢
			async gitlike() {
				let res = await gethouse(this.pageData)
				// console.log(res.data);
				res.data.forEach(i => {
					// console.log(i);
					i.tabs = JSON.parse(i.tabs.replace(/'/g, '"'))
					this.likelist.push(i)
				})
				// console.log(this.likelist);
				// this.likelist = res.data
			},

			//获取位置信息
			...mapMutations(['changeCity']),
			getCity() {
				let _this = this;
				uni.getLocation({
					success(res) {
						//调用逆地址解析--获取中文  DUUBZ-PZRR4-4QGUT-F2465-AAIJK-DEBIQ
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/',
							method: 'get',
							data: {
								key: 'DUUBZ-PZRR4-4QGUT-F2465-AAIJK-DEBIQ',
								location: `${res.latitude},${res.longitude}`
							},
							success(res) {

								let city = res.data.result.address_component.city;
								_this.changeCity(city)


							}
						})

					},
				})
			}




		},
		computed: {
			...mapState(["cityName"]),
			...mapState("details", ["information"])
		}



	}
</script>

<style lang="scss" scoped>
	/* pages/home/home.wxss */

	.hed {
		width: 750rpx;
		height: 300rpx;
		position: relative;

	}

	.hed .i {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 660rpx;
		height: 80rpx;
		position: absolute;
		top: 16px;
		left: 46rpx;
		background: blanchedalmond;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.iconfont {
			font-size: 50rpx;
		}

		.ss {
			// width: 28rpx;
			// height: 28rpx;
			// font-size: 30rpx !important;
		}

		.dw {
			// width: 28rpx;
			// height: 28rpx;
			color: blue;


		}

		.top-inp {
			width: 400rpx;
			height: 28rpx;
			border: 1px solid #ccc;
			border-top: none;
			border-bottom: none;
			border-left: none;
		}

		.top-in {
			width: 60rpx;
			font-size: 30rpx;
			line-height: 30rpx;
			text-align: center;

		}
	}



	//中间内容
	.mains {
		width: 660rpx;
		margin: 0 auto;
		box-sizing: border-box;


		//小图标
		.obj {
			width: 100%;
			margin: 40rpx auto;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
		}

		.item {
			width: 20%;
			text-align: center;

			padding: 20rpx 0;

		}

		.item image {
			width: 100rpx;
			height: 80rpx;
		}

		//找房
		.connet {
			.connet-top {
				font-size: 40rpx;
				padding: 20rpx 0;
				font-weight: bolder;
			}

			.conimg {
				height: 185rpx;
				border: 20rpx;
			}
		}

		//新房
		.house {
			// width: 100%;

			.tit {
				font-size: 40rpx;
				font-weight: bolder;
				padding: 40rpx 0;

			}

			.estate {
				// width: 100%;
				display: flex;

				.item {
					padding-right: 10rpx;
					width: 30%;
					text-align: left;
					flex-wrap: wrap;

					.img {
						width: 100%;
						height: 160rpx;
						padding-bottom: 20rpx;
					}

					.tits {
						padding: 0;
						font-size: 40rpx;
						font-weight: bolder;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.m {
						font-size: 24rpx;
						padding: 20rpx 0;
						color: #ececec;
					}

					.pric {
						font-size: 30rpx;
						color: red;
					}
				}
			}
		}

		//猜你喜欢
		.like {

			.like-tit {
				font-size: 40rpx;
				font-weight: bolder;
				padding: 40rpx 0;
			}




		}


	}
</style>